<!-- 账号管理首页 -->
<template>
  <div class="electronic-signature-home">
    <div class="operation-info">
      <div class="select-tabs">
        <tab-sel :tabs="tabsArr" :info="tabsArr[activeIndex].list" @seled='activeItem' />
      </div>
      <div class="operation-video">
        <video controls preload src="https://m.met-ec.com/cdn/uc/pc/账号管理.mp4"></video>
      </div>
    </div>
    <div class="business-card-corver">
      <business-card
        class="business-card-item"
        :data="item"
        v-for="(item, index) in cardList"
        :key="index + 'm'"
      />
      <div
        class="placeholder-item"
        v-for="(item, index) in cardList.length * 3"
        :key="index + 'n'"
      ></div>
    </div>
  </div>
</template>
<script>
import tabSel from '@/moduleComponents/home/tab-sel.vue'
import businessCard from '@/moduleComponents/home/business-card.vue'
import { getStatisticsDataByCompany } from '@api/m_staff_center_v1.js'

export default {
  name: 'authenticationHome',
  components: {
    tabSel,
    businessCard
  },
  data() {
    return {
      tabsArr: [{name: '如何管理添加员工并管理权限？', id: 1,list:[
        {title: '组织管理', text: '添加企业组织架构，组织架构绑定角色、人员。', key: 1},
        {title: '用户管理', text: '添加企业员工账号信息。', key: 2},
        {title: '角色管理', text: '制定权限角色，对角色设置权限。', key: 3},
        {title: '集团公司维护', text: '建立多企业关系。', key: 4},
      ]}],
      cardList: [
        {
          title: '组织架构',
          info: '岗位数',
          num: 0,
          logoUrl: require('@assets/img/home/pc-qyrz-zhglzzjgbg-icon@2x.png'),
          bgImgUrl: require('@assets/img/home/pc-qyrz-zhgl-bg@2x.png')
        },
        {
          title: '用户管理',
          info: '用户数',
          num: 0,
          logoUrl: require('@assets/img/home/pc-qyrz-zhglyhglbg-icon@2x.png'),
          bgImgUrl: require('@assets/img/home/pc-qyrz-zhgl-bg@2x.png')
        },
        {
          title: '角色管理',
          info: '角色数',
          num: 0,
          logoUrl: require('@assets/img/home/pc-qyrz-zhgljsglbg-icon@2x.png'),
          bgImgUrl: require('@assets/img/home/pc-qyrz-zhgl-bg@2x.png')
        },
        {
          title: '集团企业关系',
          info: '企业数',
          num: 0,
          logoUrl: require('@assets/img/home/pc-qyrz-zhgljtqygxbg-icon@2x.png'),
          bgImgUrl: require('@assets/img/home/pc-qyrz-zhgl-bg@2x.png')
        }
      ],
      activeIndex: 0
    }
  },
  created(){
    this.getData()
  },
  methods:{
    activeItem(index) {
      this.activeIndex = index
    },
    getData(){
      this.$axios({
        method: 'GET',
        url: getStatisticsDataByCompany
      })
        .then(res => {
          let result = res.data.payload
         this.cardList[0].num = result.positionNum
         this.cardList[1].num = result.staffNum
         this.cardList[2].num = result.roleNum
         this.cardList[3].num = result.groupCompanyNum
        })
        .finally(() => {})
    }
  }
}
</script>
<style lang="less">
.electronic-signature-home {
  box-sizing: border-box;
  padding: 14px 26px;
  overflow: auto;
  .operation-info {
    display: flex;
    .select-tabs {
      width: 450px;
      .info-wrapper {
        height: calc(100% - 40px);
      }
    }
    .operation-video {
      flex: 1;
      height: auto;
      padding-top: 36px;
      video {
        width: 100%;
        height: 100%;
      }
    }
  }

  .business-card-corver {
    margin-top: 44px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .business-card-item {
      margin-top: 20px;
    }
    .placeholder-item {
      width: 260px;
      height: 0;
      font-size: 0;
    }
  }
}
</style>
